<template>
<div class="goods">
  <van-nav-bar title="商品详情" left-arrow @click-left="back" left-text="返回" right-text="分享" @click-right="share">
  </van-nav-bar>
  <!-- <c-header :title="'商品详情'"></c-header> -->
  <van-swipe class="goods-swipe" :autoplay="3000">
    <van-swipe-item v-for="(img,index) in proDetail.pics" :key="index">
      <img :src="'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/'+img">
    </van-swipe-item>
  </van-swipe>
  <van-cell-group>
    <van-cell>
      <div class="goods-title">{{ proDetail.name }}</div>
      <div class="goods-price">{{ proDetail.cash }}</div>
    </van-cell>
    <van-cell class="goods-express">
      <!-- <van-col span="10">运费：{{ pro.express }}</van-col> -->
      <van-col span="14">剩余：{{ proDetail.stocks }}</van-col>
    </van-cell>
  </van-cell-group>

  <van-cell-group class="goods-cell-group">
    <van-cell value="进入店铺" icon="shop" is-link>
      <template slot="title">
          <span class="van-cell-text">未来社区的店</span>
          <van-tag type="danger">官方</van-tag>
        </template>
    </van-cell>
    <van-cell title="线下门店" icon="location" is-link />
  </van-cell-group>

  <van-cell-group class="goods-cell-group">
    <van-cell title="查看商品详情" is-link />
  </van-cell-group>

  <van-goods-action>
    <van-goods-action-mini-btn icon="chat" text="客服" @click="customService"/>
    <van-goods-action-mini-btn icon="cart" :info="proCount+''" text="购物车" @click="toCart" />
    <!-- <van-goods-action-mini-btn icon="shop" text="店铺" @click="toShop"/> -->
    <van-goods-action-big-btn @click="addCart">
      加入购物车
    </van-goods-action-big-btn>
    <van-goods-action-big-btn primary @click="toPay">
      立即购买
    </van-goods-action-big-btn>
  </van-goods-action>
  <!-- <van-sku v-model="showBase" :sku="sku" :goods="pro" :goods-id="goodsId" :hide-stock="sku.hide_stock" :quota="quota" :quota-used="quotaUsed" :reset-stepper-on-hide="resetStepperOnHide" :reset-selected-sku-on-hide="resetSelectedSkuOnHide" :disable-stepper-input="disableStepperInput"
    @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked">
    <div slot="sku-messages">
      <van-cell-group>
        <van-field v-model="message" label="留言" type="textarea" placeholder="请输入留言" rows="1" autosize />
      </van-cell-group>
    </div>
  </van-sku> -->
</div>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      proCount: 0,
      message: '', //买家留言
      goods: {
        title: '美国伽力果（约680g/3个）',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/wlsq/shop/goods_img/20170427165508886806.jpg?x-oss-process=image/resize,m_fixed,h_640,w_640',
          'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/wlsq/shop/goods_img/20170427165508937003.jpg?x-oss-process=image/resize,m_fixed,h_640,w_640'
        ]
      },
      showBase: false, // 是否显示sku
      quota: 5, // 限购数(0表示不限购)
      quotaUsed: 1, // 已经购买过的数量
      goodsId: '12', //商品id
      resetStepperOnHide: true, //窗口隐藏时重置选择的商品数量
      resetSelectedSkuOnHide: true, // 窗口隐藏时重置已选择的sku
      disableStepperInput: false, // 是否禁用sku中stepper的input框
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [{
          k: '颜色', // skuKeyName：规格类目名称
          v: [{
              id: '30349', // skuValueId：规格值 id
              name: '红色', // skuValueName：规格值名称
              imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
            },
            {
              id: '1215',
              name: '蓝色',
              imgUrl: 'https://img.yzcdn.cn/2.jpg'
            }
          ],
          k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
        }],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [{
          id: 2259, // skuId，下单时后端需要
          price: 100, // 价格（单位分）
          s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
          s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
          s3: '0', // 最多包含3个规格值，为0表示不存在该规格
          stock_num: 110 // 当前 sku 组合对应的库存
        }],
        price: '1.00', // 默认价格（单位元）
        stock_num: 19, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [{
          // 商品留言
          datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
          multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
          name: '留言', // 留言名称
          type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
          required: '1' // 是否必填 '1' 表示必填
        }],
        hide_stock: false // 是否隐藏剩余库存
      }
    };
  },
  computed: {
    ...mapGetters([
      'proDetail'
    ])
  },
  created() {
    this.getProDetail({
      proId: this.$route.query.proId
    })
  },
  beforeRouteEnter (to, from, next) {
    const proId = to.query.proId
    if (!proId) return
    next((vm) => {
      vm.getProDetail({ proId: proId })
    })
  },
  methods: {
    ...mapActions([
      'getProDetail'
    ]),
    // 返回
    back() {
      this.$router.back();
    },
    // 立即购买
    toPay() {
      this.showBase = true;
    },
    // 进入店铺
    toShop() {
      this.$dialog.alert({
        title: '店铺',
        message: '店铺正在设计中,请敬请期待....'
      }).then(() => {
        // on close
      });
    },
    getPro(){
      this.getProDetail({
        proId: this.$route.query.proId
      })
    },
    // 客服
    customService() {
      this.$dialog.alert({
        title: '客服',
        message: '该功能待完善中....'
      }).then(() => {
        // on close
      });
    },
    // 分享
    share() {
      this.$dialog.alert({
        title: '分享',
        message: '该功能待完善中....'
      }).then(() => {
        // on close
      });
    },
    addCart() {
      if (this.proCount >= this.goods.remain) {
        this.$toast({
          'message': '库存不足!'
        });
        return
      }
      this.proCount++;
    },
    toCart() {
      this.$router.push({
        path: '/cart'
      })
    },
    onBuyClicked() {
      this.$router.push({
        path: '/orderPay'
      })
    },
    onAddCartClicked() {
      this.$toast('加入购物车');
    },
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    }
  },
  watch:{
    "$route":'getPro'
  }
};
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.goods {
    padding-bottom: 70px;
    background-color: #f2f2f2;
    &-swipe {
        img {
            width: 100%;
            height: 7.5rem;
            display: block;
        }
    }
    &-title {
        @include font-dpr(15px);
        font-weight: bolder;
    }
    &-price {
        color: #f44;
    }
    &-express {
        color: #999;
        @include font-dpr(12px);
        padding: 5px 15px;
    }
    &-cell-group {
        margin: 10px 0;
        .van-cell__value {
            color: #999;
        }
    }
}
</style>
